<template>
  <div class="serviceManagement">
    <c-title :hide="false" :text="'管理'"></c-title>
    <div class="topHead" :style="{ 'background-image': diyUrl('bg@2x.png',false) }">
      <div class="Commodity_valuation">商品估值</div>
      <div class="inp_box">
        <p class="small_txt">{{ $i18n.t("money") }}</p>
        <span class="num">{{ infoData.goods_amount }}</span>
      </div>
      <div class="flexBox">
        <div class="flexBox_l">总库存数量</div>
        <div class="flexBox_r">委拍数量</div>
      </div>
      <div class="flexBox" style="margin-top: 0.5rem;">
        <div class="flexBox_l bd">{{ infoData.auction_goods_count }}</div>
        <div class="flexBox_r bd">{{ infoData.entrust_count }}</div>
      </div>
    </div>
    <div class="line">
      <div class="line_m" @click="toIndex">
        <div class="line_m_l">
          <div class="line_m_l_img">
            <img :src="diyUrl('icon_service%20@2x.png')" alt="">
          </div>
          <div class="txt">服务管理</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
    </div>
    <div class="line">
      <div class="line_m mb" @click="toUrlLink('new_auction_Warehouse')">
        <div class="line_m_l">
          <div class="line_m_l_simg">
            <img :src="diyUrl('icon_warehouse@2x.png')" alt="">
          </div>
          <div class="txt_sm">我的仓库</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
      <div class="line_m mb" @click="toUrlLink('auction_bidding_details')">
        <div class="line_m_l">
          <div class="line_m_l_simg">
            <img :src="diyUrl('icon_entrust@2x.png')" alt="">
          </div>
          <div class="txt_sm">委托明细</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
      <div class="line_m mb">
        <div class="line_m_l">
          <div class="line_m_l_simg">
            <img :src="diyUrl('icon_payment card@2x.png')" alt="">
          </div>
          <div class="txt_sm">支付卡</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
      <div class="line_m mb">
        <div class="line_m_l">
          <div class="line_m_l_simg">
            <img :src="diyUrl('icon_settlement card@2x.png')" alt="">
          </div>
          <div class="txt_sm">结算卡</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
    </div>
    <div class="line">
      <div class="line_m" @click="toUrlLink('new_auction_instructions')">
        <div class="line_m_l">
          <div class="line_m_l_simg">
            <img :src="diyUrl('icon_auction@2x.png')" alt="">
          </div>
          <div class="txt_sm">拍卖须知</div>
        </div>
        <div class="line_m_r"><van-icon name="arrow" color="#AAAAAA" /></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoData: [],
      hostUrl: ''
    };
  },
  activated() {
    this.getData();
    this.hostUrl = process.env.NODE_ENV == 'development'?'dev4.yunzmall.com':window.location.host;
  },
  computed: {
    diyUrl(url,key = true) {
      return function(url,key = true) {
        if(key){
          return `https://${this.hostUrl}/plugins/new-auction/assets/image/${url}`;
        }else{
          return `url(https://${this.hostUrl}/plugins/new-auction/assets/image/${url})`;
        }
      };
    }
  },
  methods: {
    toUrlLink(link) {
      this.$router.push(this.fun.getUrl(link, {}));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.index", {}, "");
      if (result) {
        this.infoData = data;
      } else {
        this.$toast(msg);
      }
    },
    toIndex() {
      this.$router.push(this.fun.getUrl("serviceManagement_index", {}));
    }
  }
};
</script>
<style lang="scss" scoped>
.serviceManagement {
  padding: 1.25rem 0.94rem;
  box-sizing: border-box;
  .line {
    background: #ffffff;
    padding: 0.75rem 0.94rem;
    box-sizing: border-box;
    border-radius: 0.63rem;
    margin: 0.94rem 0;
    .mb {
      margin-bottom: 1.25rem;
    }
    .mb:last-child {
      margin-bottom: 0;
    }
    .line_m {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .line_m_l {
        flex: 1;
        display: flex;
        align-items: center;
        .line_m_l_simg {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 50%;
          margin-right: 0.63rem;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .line_m_l_img {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          margin-right: 0.75rem;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .txt {
          text-align: left;
          font-weight: bold;
          font-size: 1rem;
        }
        .txt_sm {
          text-align: left;
          font-weight: bold;
          font-size: 0.88rem;
        }
      }
      .line_m_r {
        flex-shrink: 0;
      }
    }
  }
  .topHead {
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 0.63rem;
    padding: 0.94rem;
    box-sizing: border-box;
    .Commodity_valuation {
      margin-bottom: 0.31rem;
      font-weight: bold;
      font-size: 1rem;
      color: #ffffff;
      text-align: left;
    }
    .flexBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .flexBox_l,
      .flexBox_r {
        text-align: left;
        font-size: 0.88rem;
        color: #ffffff;
      }
      .bd {
        font-weight: bold;
        font-size: 1rem;
        color: #ffffff;
      }
    }
    .inp_box {
      display: flex;
      align-items: center;
      position: relative;
      padding-bottom: 0.75rem;
      margin-bottom: 0.75rem;
      .small_txt {
        font-weight: 400;
        font-size: 1rem;
        color: #ffffff;
        margin-right: 0.31rem;
      }
      .num {
        font-weight: bold;
        font-size: 1.56rem;
        color: #ffffff;
      }
    }
    .inp_box::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0.03rem;
      background: #ffffff;
    }
  }
}
</style>
